import {Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core';
import {ChartDataSets, ChartType, RadialChartOptions} from 'chart.js';
import {Color, Label} from 'ng2-charts';

@Component({
    selector: 'orhon-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss'],
})
export class ChartComponent implements OnInit, OnChanges {
    @Input() title?: string;
    @Input() radarChartLabels: Label[];
    @Input() radarChartData: ChartDataSets[];
    @Input() radarChartType: ChartType;
    @Input() data: number[];
    list: any[] = [];
    // Radar
    public radarChartOptions: RadialChartOptions;
    public colors: Color[];
    // public radarChartData: ChartDataSets[] = [
    //     {data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A'},
    //     {data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B'}
    // ];


    // events
    public chartClicked({event, active}: { event: MouseEvent, active: {}[] }): void {
        console.log(event, active);
    }

    public chartHovered({event, active}: { event: MouseEvent, active: {}[] }): void {
        console.log(event, active);
    }

    constructor() {
        this.title = '';
        this.radarChartType = 'pie'; // radar(雷达图) pie(饼图)
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.radarChartData && changes.radarChartData.currentValue) {
            this.radarChartData = changes.radarChartData.currentValue;
        }
        if (changes.data && changes.data.currentValue) {
            this.data = changes.data.currentValue;
        }
        if (changes.radarChartType && changes.radarChartType.currentValue) {
            this.radarChartType = changes.radarChartType.currentValue;
            this.radarChartOptions = {
                responsive: true,
                legend: {
                    display: this.radarChartType === 'radar' ? false : true,
                }
            };
        }
        if (this.radarChartType === 'radar') {
            this.colors = [
                {
                    backgroundColor: '#e22417',
                },
            ];
        }
    }

    ngOnInit() {
    }
}
